Payment methods

Managing payment methods is a vital aspect of the custom checkout process. With the Afosto Storefront JavaScript Client, you can easily fetch available payment methods that are applicable to a particular cart and add them to the cart as selected by the customer. This guide will walk you through both processes step-by-step.

Fetching available methods

The payment methods that are available can be specific to the current cart and its associated data. This query ensures you get the methods that are applicable, taking into account factors like pricing rules.

1import { gql } from '@afosto/graphql-client';
2
3const getCartPaymentMethodsQuery = gql`
4  query getCartPaymentMethods($id: String!) {
5    cart(id: $id) {
6      options {
7        payment {
8          methods {
9            id
10            code
11            name
12            description
13            instruction
14            issuers {
15              id
16              label
17            }
18            pricing {
19              fixed
20              percentage
21            }
22          }
23        }
24      }
25      billing {
26        payment {
27          method {
28            id
29          }
30        }
31      }
32      vat {
33        rate
34        amount
35      }
36    }
37  }
38`;
39
40export default getCartPaymentMethodsQuery;

Adding a payment method to the cart

Once the customer has selected a payment method, you can add it to the cart using the following query:

1import { gql } from '@afosto/graphql-client';
2import CoreProjectionFields from './CoreProjectionFields';
3
4const addPaymentMethodToCartMutation = gql`
5  ${CoreProjectionFields}
6  mutation AddPaymentMethodToCart($payment_method_payload: AddPaymentMethodToCartInput!) {
7    addPaymentMethodToCart(input: $payment_method_payload) {
8      cart {
9        ...CoreProjectionFields
10        billing {
11          payment {
12            method {
13              id
14              code
15              name
16            }
17            issuer {
18              id
19              label
20            }
21          }
22        }
23      }
24    }
25  }
26`;
27
28const variables = {
29  paymentMethodPayload: {
30    cartId: 'my_cart_token',
31    methodId: 'selected_payment_method_id',
32  },
33};
34
35const response = await client.query(addPaymentMethodToCartMutation, variables);

Handling issuers

Some payment methods may have issuers. For example, the Dutch iDEAL payment method has issuers representing various Dutch banks. The customer must select their preferred issuer for the transaction to proceed successfully.

The list of issuers is available in the payment methods fetched in the first query. You can select an issuer by adding an issuerId to the paymentMethodPayload variable when executing addPaymentMethodToCartMutation.

1const variables = {
2  paymentMethodPayload: {
3    cartId: 'my_cart_token',
4    methodId: 'selected_payment_method_id',
5    issuerId: 'selected_issuer_id',
6  },
7};

By integrating these GraphQL queries and mutations into your custom checkout process, you'll be able to manage payment methods effectively using the Afosto Storefront JavaScript Client.